<template>
	<view class="page">
        <block v-if="info">
		<!-- 活动详情 -->
		<view class="container">
			<view class="banner-box mar-t-8" v-if="info.images" >
                <swiper class="banner" :indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration">
                    <swiper-item class="flex-1" v-for="(img,k) in info.images" :key="k">
                        <image  class="banner-item " :src="img" mode="widthFix" lazy-load='true'></image>
                    </swiper-item>
                </swiper>
            </view>
            <view class="pad-b-20">
                <view class="info flex  mar-t-10 ">
                    <view class="flex-1">
                        <view>
                            <text class="font-size-17 font-color-333 font-bold tq-text-line2">{{info.name}}</text>
                        </view>
                        
                    </view>
                    <view class="mar-t-7 font-size-12" >
                        <text class="act-over-tag text-center ">限时报名</text>
                    </view>
                </view>
                <view class="flex align-center" v-if="info.limit_num>0">
                    <view class="flex-1 "> <progress :percent="parseInt(info.real_number)/parseInt(info.limit_num)*100"  active stroke-width="8" :border-radius="20" /></view>
                    <view class="mar-l-10">
                        <text>剩余{{info.real_number}}/{{info.limit_num}}名额</text>
                    </view>
                </view>
                <view class="font-size-15 font-color-888 mar-t-5">
                    活动时间:{{transformTime(info.start_time) || ''}} 至 {{transformTime(info.end_time) ||''}}
                </view>
                <view class="font-size-15 font-color-888 mar-t-5">
                    活动地点:{{info.address}}
                </view>
                <block v-if="info.center_place">
                    <view class="font-size-15 font-color-888 mar-t-5 " v-for="(place,i) in info.center_place" :key="i">
                        <view class="tq-text-line1">{{place.time}}-{{place.name}}集合</view>
                    </view>
                </block>
            </view>
     
        
		</view>
		<clear-line :height="13" :bacColor="'#F4F5FA'"></clear-line>

		<!-- 咨询师内容部分 -->
		<view class="container pad-t-20 pad-b-60 font-size-16 font-color-999" v-if="info.content">
			<!-- <rich-text :nodes="info.content"></rich-text> -->
			<view v-html="info.content">
		</view>	
		</view>
		<!-- 咨询师内容部分结束 -->

        <!-- 底部按钮 -->
        <view class="pos-fixed flex footerBox bac-color-fff text-center box-b" style="height: 100rpx;padding: 12rpx;">
            <navigator
                    url="/pages/index/index"
                    open-type="switchTab"
                    hover-class="none"    
                    class="flex-1 flex flex-column align-center" 
                >
                <image class="iconImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/bdf80ef9-93e1-4d19-aa31-58a4ba84faa0.png"></image>
                <text class="font-size-12 font-color-999 mar-t-2">首页</text>
            </navigator>
             <navigator 
                    url="/pages/kefu/kefu"
                    open-type="navigate"
                    hover-class="none"  
                    class="flex-1 flex flex-column align-center" >
                <image class="iconImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/6fadb470-5dd6-4198-a697-205a699962a0.png"></image>
                <text class="font-size-12 font-color-999 mar-t-2">客服</text>
            </navigator>
            <view class="flex-1 flex flex-column align-center" @click="follow">
				<image class="iconImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/0b109cf2-a4ff-4f28-a2e5-17d6abe442e1.png" v-if="followed"></image>
				<image class="iconImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/27ac0650-9b5e-453b-ab02-7e9b4953cee3.png" v-else></image>
                <text class="font-size-12 font-color-999 mar-t-2">收藏</text>
            </view>
            <button class="flex-3 yuyue-btn flex  align-center justify-center " @click="enroll" :class="{'disable':info.status!=1?true:false}"> 
                <text class="font-color-fff font-size-15 font-bold" >立即报名</text>
            </button>
        </view>
        <!-- 底部按钮结束 -->
        </block>
	</view>
</template>

<script>
import { getActDetail,followExits,followAdd,followCancel } from '@/utils/http'
export default {
    data() {
		return {
            id:'',
            info: '',
            autoplay: true,
			interval:6000,
			duration:500,
            banners:'',
            followed:false,
		}
	},
	methods: {
		detail(id) {
			getActDetail({ id:this.id }).then(res => {
				if (res) {
					this.info = res
                    if(this.info.center_place){
                        this.info.center_place = JSON.parse(res.center_place)
                        console.log(this.info);
                        // this.info.center_place.push(this.info.center_place[0])
                    }
				}
			})
        },
        followExits(){
            followExits({type:'activity',ids:this.id}).then(res=>{
                this.followed = res ?  true :false;
            })
        },
        follow(){
            if(this.followed == true){
                //取消关注
                followCancel({type:'activity',id:this.id}).then(res=>{
                    this.followed = res && res.follow_count > 0 ?  true :false;
                })
            }else{
                //关注
                followAdd({type:'activity',id:this.id}).then(res=>{
                    this.followed = res && res.follow_count > 0 ?  true :false;
                    // this.follow_id = res.id;
                    
                })
            }
           
        },
        enroll(){
            if(this.info.status==1){
                uni.navigateTo({
                    url: '/pages/activity/enroll?id='+this.id
                });
            }
         
        }
	},
	onLoad(option) {
        this.id = option.id
        this.followExits();
		this.detail()
	}
}
</script>

<style scoped>
/* .uni-swiper{
	height: 150px !important;
} */
.banner-box {
	border-radius: 5px;
}
.banner {
	border-radius: 5px;
}
.banner-item {
	/* height: 150px;
	line-height: 150px; */
	border-radius: 5px;
	text-align: center;
	width: 100%;
}
.act-over-tag{
    padding: 3px 10px;
    background-color: #FF4000;
    color: #ffffff;
    border-radius: 10px;
}

.pad-b-80{
    padding-bottom: 80px;
}
.footerBox{
    width: 100%;
    bottom: 0;
    /* min-height: 2.78em; */
    box-shadow: 3px -2px 16px 6px rgb(243, 240, 240);
}
.iconImg{
	height: 48rpx;
	width: 48rpx;
}
.yuyue-btn{
    background-color: #0088FF;
}
.yuyue-btn.disable{
    background:#ccc !important; 
   
}
</style>